<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ page isELIgnored="false" %>
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="icon" href="">
  <title>Insert title here</title>
  <link rel="stylesheet" type="text/css"
        href="static/jquery-easyui-1.3.3/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css"
        href="static/jquery-easyui-1.3.3/themes/icon.css">
  <script type="text/javascript"
          src="static/jquery-easyui-1.3.3/jquery.min.js"></script>
  <script type="text/javascript"
          src="static/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
  <script type="text/javascript"
          src="static/js/common.js"></script>
  <script type="text/javascript">
    var url;

    function searchDept() {
      $("#dg").datagrid('load', {
        "name": $("#s_name").val()
      });
    }

    function deleteDept() {
      var selectedRows = $("#dg").datagrid('getSelections');
      if (selectedRows.length == 0) {
        $.messager.alert("system prompt",
            "Please choose the data to delete!");
        return;
      }
      var strIds = [];
      for (var i = 0; i < selectedRows.length; i++) {
        strIds.push(selectedRows[i].id);
      }
      var ids = strIds.join(",");
      $.messager
      .confirm(
          "system prompt",
          "Do you want to delete the <font color=red>"
          + selectedRows.length + "</font> data?",
          function (r) {
            if (r) {
              $.post(
                  "dept/delete",
                  {
                    ids: ids
                  },
                  function (result) {
                    if (result.code !== 0) {
                      $.messager.alert("system prompt", result.message);
                    } else {
                      $.messager.alert("system prompt", "Delete successful!");
                      $("#dg").datagrid("reload");
                    }
                  }, "json");
            }
          });
    }

    function openDeptAddDialog() {
      $("#dlg").dialog("open").dialog("setTitle", "Add new department");
      url = "dept/save";
    }

    function saveDept() {
      $("#fm").form("submit", {
        url: url,
        onSubmit: function () {
          console.log(this);
          return $(this).form("validate");
        },
        success: function (result) {
          // 表单提交需要转json，post不需要转
          result = JSON.parse(result);
          if (result.code !== 0) {
            $.messager.alert("system prompt", result.message);
          } else {
            $.messager.alert("system prompt", "Save successful!");
            resetValue();
            $("#dlg").dialog("close");
            $("#dg").datagrid("reload");
          }
        }
      });
    }

    function openDeptModifyDialog() {
      var selectedRows = $("#dg").datagrid('getSelections');
      if (selectedRows.length != 1) {
        $.messager.alert("system prompt", "Please choose a data to edit!");
        return;
      }
      var row = selectedRows[0];
      $("#dlg").dialog("open").dialog("setTitle",
          "Edit department information");
      $('#fm').form('load', row);
      url = "dept/save?id=" + row.id;
    }

    function resetValue() {
      $("#name").val("");
      $("#description").val("");
    }

    function closeDeptDialog() {
      $("#dlg").dialog("close");
      resetValue();
    }
  </script>
</head>
<body style="margin: 1px;">
<div
     style="width: 450px; height: 250px; padding: 10px 20px" closed="true"
     >
  <form id="fm" method="post" action="dept/list">
    <% String id = request.getParameter("id");
      if (id != null) { %>
    <input name="id" value="<%=id%>" hidden="true"/>
    <% } %>
    <table cellspacing="8px">
      <tr>
        <td>Name:</td>
        <td><input type="text" id="name" name="name" value="${name}"
                   style="width: 180px" class="easyui-validatebox" required="true"/>&nbsp;<font
            color="red">*</font></td>
      </tr>
      <tr>
        <td>Description:</td>
        <td><textarea id="description" name="description"
                      style="width: 180px; height: 80px;" class="easyui-validatebox"
                      required="true">${description}</textarea>&nbsp;<font color="red">*</font></td>
      </tr>
      <tr>
        <td><input type="submit" name="ok" value="Save"/>&nbsp;
        <td><button type="button" name="back" value="Back" id="back" onClick="javascript:history.back(-1)">Back</button>
      </tr>
    </table>
  </form>
</div>

</body>
</html>